import type { CollapseType } from "antd/es/layout/Sider"
import React, { useMemo } from "react"

import { WrapperMenu } from "../../index.styled"
// import { Menu } from "antd"
import { GlobalMenuOption, MenuInfo, SelectInfo } from "../../types"
import { GlobalLogo } from "../globalLogo"
import { WrapperFixedSider } from "./index.styled"
// import { Icon } from "@iconify/react"

interface FixedSiderProps {
	routeMenus: GlobalMenuOption[]
	onSelect?: (info: SelectInfo) => void
	onClick?: (info: MenuInfo) => void
	onOpenChange?: (openKeys: string[]) => void
	defaultSelectedKeys?: string[]
	selectedKeys?: string[]
	openKeys?: string[]
	defaultOpenKeys?: string[]
	onCollapse?: (collapsed: boolean, type: CollapseType) => void
}

const FixedSider: React.FC<FixedSiderProps> = ({
	routeMenus,
	defaultSelectedKeys,
	onSelect,
	onClick,
	onOpenChange,
	selectedKeys,
	openKeys,
	defaultOpenKeys,
	onCollapse
}) => {
	const logoStyle = useMemo(() => {
		return {
			//   height: theme.header.height + 'px',
			//   width: theme.sider.fixedWidth + 'px'
			height: 56,
			width: 80
		}
	}, [])

	const menuItems = () => {
		return routeMenus.map(item => ({
			label: item.label,
			icon: item.icon,
			// icon: <Icon icon={item.icon as string} fontSize="1.5rem" />,
			key: item.key
		}))
	}

	return (
		<WrapperFixedSider
			// The issue relate to conflict the theme of styled-components: https://github.com/styled-components/styled-components/issues/4182
			customTheme="light"
			// Get width from theme
			width={80}
			onCollapse={onCollapse}
		>
			<GlobalLogo $showtitle={false} styleGlobalLogo={logoStyle} />
			<WrapperMenu
				inlineIndent={16}
				mode="inline"
				defaultSelectedKeys={defaultSelectedKeys}
				defaultOpenKeys={defaultOpenKeys}
				selectedKeys={selectedKeys}
				openKeys={openKeys}
				onSelect={onSelect}
				onClick={onClick}
				onOpenChange={onOpenChange}
				items={menuItems()}
			/>
		</WrapperFixedSider>
	)
}

export default React.memo(FixedSider)
